<template>
  <el-row>
    <el-col :span="6" v-for="(row, i) in tableData" :key="i" class="card-table-item">
      <div class="card-main">
        <div class="flex card-content">
          <slot name="column" :row="row"></slot>
        </div>
        <div class="flex card-footer f-between tc" v-if="menuBtn && menuBtn.length > 0">
          <AplidActions :list="menuBtn" @change="handleOperate" :row="row"> </AplidActions>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { AplidActions } from '@/components/AplidCrud'

type Props = {
  tableData: any
  menuBtn: any
}
withDefaults(defineProps<Props>(), {
  tableData: [],
})

const emit = defineEmits(['change'])
const handleOperate = (type, row, title) => {
  emit('change', type, row, title)
}
</script>

<style scoped lang="scss">
.card-table-item {
  margin-top: vw(15);
}

.card-main {
  margin: 6px;
  border-radius: 10px;
  min-height: 10rem;
  position: relative;

  .card-content {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 40px);
  }
}

.card-footer {
  background: #eee;
  color: #bbb;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;

  &:hover {
    cursor: pointer;
  }
}
</style>
